<template>
	<view class="coupon-list">
		<!-- 工作台 -->
		<view class="coupon-workbench-box" v-if="tabIndex == 0">

			<view class="user-info-box">
				<view class="left-info-box">
					<image class="avatar-img" v-if="userInfo.avatar != '0'" :src="userInfo.avatar" mode="aspectFit">
					</image>
					<image class="avatar-img" v-else
						src="https://biapi.vaubang.cn/UploadFiles/Images/bi-minigram/empty-avatar.png" mode="aspectFit">
					</image>
					<view class="info-text">
						<view class="user-role-name">
							{{userInfo.roleNames ? userInfo.roleNames : ""}}-{{userInfo.realName ? userInfo.realName : ""}}
						</view>
						<view class="user-company">
							{{userInfo.shopId ? userInfo.shopId : ""}}-{{userInfo.shopName ? userInfo.shopName : ""}}
						</view>
					</view>
				</view>
				<van-icon class="add-icon" v-if="isManager || isFinancial" name="add-o"
					@click="handleNavToggle('createCoupon')" />
			</view>

			<!-- <view class="coupon-desc-box">
				<view class="title">卡券概览</view>
				<view class="coupon-info-box">
					<view class="coupon-info-item">
						<view class="item-title">总卡券</view>
						<view class="item-value">556</view>
					</view>

					<view class="coupon-info-item">
						<view class="item-title">今日发放</view>
						<view class="today-send">
							<view class="num-box">
								<text class="value-num red">18</text>
								<image class="value-arrow" src="../../static/coupon/arrow-up.png" mode="widthFix">
								</image>
							</view>
							<view class="contrast-box red">较昨日新增2</view>
							<view class="last-day-box">昨日16</view>
						</view>
					</view>

					<view class="coupon-info-item">
						<view class="item-title">今日核销</view>
						<view class="today-send">
							<view class="num-box">
								<text class="value-num green">12</text>
								<image class="value-arrow" src="../../static/coupon/arrow-down.png" mode="widthFix">
								</image>
							</view>
							<view class="contrast-box green">较昨日下降1</view>
							<view class="last-day-box">昨日13</view>
						</view>
					</view>
				</view>
			</view>

			<view class="remind-box">
				<view class="title-box">
					<view class="title-text">今日提醒</view>
					<image class="refresh-icon" src="../../static/coupon/refresh.png" mode="widthFix">
					</image>
				</view>

				<view class="remind-content">
					<view class="remind-surplus-chart">10</view>
					<view class="remind-surplus-tip">
						今日您还有<text class="surplus-num">10</text>项待审核数据，赶紧去完成吧！
					</view>
				</view>
			</view> -->
			<!-- 卡券数量、发放统计 -->
			<!-- <view class="coupon-statics-box" v-if="isCouponDataTotalShow">
				<view class="statics-item">
					<view class="item-title">总卡券</view>
					<view class="item-value">{{couponStatics.total}}</view>
				</view>
				<view class="statics-item">
					<view class="item-title">总发放</view>
					<view class="item-value">{{couponStatics.totalSend}}</view>
				</view>
				<view class="statics-item">
					<view class="item-title">总核销</view>
					<view class="item-value">{{couponStatics.totalUsed}}</view>
				</view>
			</view>
			<view class="coupon-statics-box" v-if="isCouponDataTotalShow">
				<view class="statics-item">
					<view class="item-title">昨日发放</view>
					<view class="item-value">{{couponStatics.yesterdaySend}}</view>
				</view>
				<view class="statics-item">
					<view class="item-title">昨日核销</view>
					<view class="item-value">{{couponStatics.yesterdayUsed}}</view>
				</view>
			</view> -->
			<view class="workbench-box">
				<view class="title">工作台</view>
				<view class="workbench-list">
					<view class="workbench-item" v-if="couponSubMchId != ''" @click="handleNavToggle('couponList')">
						<image class="item-icon" src="../../static/coupon/icon-1.png"></image>
						<view class="item-name">卡券列表</view>
					</view>
					<view class="workbench-item" v-if="couponSubMchId != '' && isManager"
						@click="handleNavToggle('createCoupon')">
						<image class="item-icon" src="../../static/coupon/icon-2.png"></image>
						<view class="item-name">创建卡券</view>
					</view>
					<view class="workbench-item" v-if="couponSubMchId != ''" @click="handleNavToggle('sendCoupon')">
						<image class="item-icon" src="../../static/coupon/icon-3.png"></image>
						<view class="item-name">发放卡券</view>
					</view>
					<view class="workbench-item" v-if="couponSubMchId != ''" @click="handleNavToggle('searchCoupon')">
						<image class="item-icon" src="../../static/coupon/icon-4.png"></image>
						<view class="item-name">用户卡券查询</view>
					</view>
					<view class="workbench-item" v-if="couponSubMchId != '' && isManager"
						@click="handleNavToggle('chargeCoupon')">
						<image class="item-icon" src="../../static/coupon/icon-5.png"></image>
						<view class="item-name">核销卡券</view>
					</view>
					<!-- <view class="workbench-item" @click="handleNavToggle('reviewedCoupon')" v-if="isFinancial">
						<view class="item-icon-box">
							<image class="item-icon" src="../../static/coupon/icon-6.png"></image>
							<text class="item-badge">10</text>
						</view>

						<view class="item-name">待审核卡券</view>
					</view> -->

					<view class="workbench-item" v-if="couponSubMchId != ''"
						@click="handleNavToggle('uploadCouponLogo')">
						<image class="item-icon" src="../../static/coupon/icon-9.png"></image>
						<view class="item-name">上传商户头像</view>
					</view>
					<view class="workbench-item" @click="handleNavToggle('settledMerchant')">
						<image class="item-icon" src="../../static/coupon/icon-6.png"></image>
						<view class="item-name">申请入驻商户</view>
					</view>
					<view class="workbench-item" @click="handleNavToggle('queryMerchantProcess')">
						<image class="item-icon" src="../../static/coupon/icon-10.png"></image>
						<view class="item-name">入驻进度查询</view>
					</view>
					<!-- <view class="workbench-item" @click="handleNavToggle('quitCoupon')">
						<image class="item-icon" src="../../static/coupon/icon-8.png"></image>
						<view class="item-name">作废卡券</view>
					</view> -->
				</view>
			</view>

			<view class="height"></view>
		</view>

		<!-- 数据报表 -->
		<view class="coupon-data-kpi" v-else-if="tabIndex == 1">


			<view class="coupon-desc-box">
				<view class="coupon-info-box">
					<view class="coupon-info-item">
						<view class="item-title">总卡券</view>
						<view class="item-value">556</view>
					</view>

					<view class="coupon-info-item">
						<view class="item-title">今日发放</view>
						<view class="today-send">
							<view class="num-box">
								<text class="value-num red">18</text>
								<image class="value-arrow" src="../../static/coupon/arrow-up.png" mode="widthFix">
								</image>
							</view>
							<view class="contrast-box red">较昨日新增2</view>
							<view class="last-day-box">昨日16</view>
						</view>
					</view>

					<view class="coupon-info-item">
						<view class="item-title">今日核销</view>
						<view class="today-send">
							<view class="num-box">
								<text class="value-num green">12</text>
								<image class="value-arrow" src="../../static/coupon/arrow-down.png" mode="widthFix">
								</image>
							</view>
							<view class="contrast-box green">较昨日下降1</view>
							<view class="last-day-box">昨日13</view>
						</view>
					</view>
				</view>

				<view class="coupon-propor-chart-list">
					<view class="coupon-propor-chart-item">
						<view class="chart-box">
							<qiun-data-charts type="arcbar" :opts="opts1" :chartData="chartData1" />
						</view>
						<view class="chart-name">满减券</view>
					</view>
					<view class="coupon-propor-chart-item">
						<view class="chart-box">
							<qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData2" />
						</view>
						<view class="chart-name">折扣券</view>
					</view>
					<view class="coupon-propor-chart-item">
						<view class="chart-box">
							<qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartData3" />
						</view>
						<view class="chart-name">换购券</view>
					</view>
				</view>
			</view>

			<!-- 月度分布概况 -->
			<view class="coupon-user-get-box">
				<view class="title-box">
					<view class="title-text">月度分布概况</view>
					<view class="date-scrren" @click.stop="handleDateScreen">
						<text class="date-text">近1个月</text>
						<van-icon class="arrow-down" name="arrow-down" />
					</view>
				</view>

				<view class="coupon-user-get-chart">
					<qiun-data-charts type="ring" :opts="opts6" :chartData="chartData6" />
				</view>
			</view>

			<!-- 客户领取概况 -->
			<view class="coupon-user-get-box">
				<view class="title-box">
					<view class="title-text">客户领取概况</view>
					<view class="date-scrren">
						<text class="date-text">近7天</text>
						<van-icon class="arrow-down" name="arrow-down" />
					</view>
				</view>

				<view class="coupon-user-get-chart">
					<qiun-data-charts type="mix" :opts="opts4" :chartData="chartData4" />
				</view>
			</view>

			<!-- 客户使用概况 -->
			<view class="coupon-user-get-box">
				<view class="title-box">
					<view class="title-text">客户使用概况</view>
					<view class="date-scrren">
						<text class="date-text">近7天</text>
						<van-icon class="arrow-down" name="arrow-down" />
					</view>
				</view>

				<view class="coupon-user-get-chart">
					<qiun-data-charts type="column" :opts="opts5" :chartData="chartData5" />
				</view>
			</view>

			<view class="height"></view>
		</view>

		<!-- 底部tabbar -->
		<view class="tabHeight" :style="{'height': tabH + 'px'}"></view>
		<coupon-tab ref="tabbar" :tab-index="tabIndex" @handleTabToggle="handleTab"></coupon-tab>

	</view>
</template>

<script>
	import couponTab from "@/packageD/components/coupon/coupon-footer.vue";
	import apiRqs from "@/api/api-request.js";
	export default {
		components: {
			couponTab,
		},
		data() {
			return {
				userInfo: {},
				isManager: false,
				isFinancial: false,
				tabIndex: 0,
				tabH: 0,
				auditNum: 10,
				chartData1: {},
				opts1: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "332",
						fontSize: 14,
						color: "#000"
					},
					subtitle: {
						name: "占比40%",
						fontSize: 10,
						color: "#333"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 6,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				chartData2: {},
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "332",
						fontSize: 14,
						color: "#000"
					},
					subtitle: {
						name: "占比40%",
						fontSize: 10,
						color: "#333"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 6,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				chartData3: {},
				opts3: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "332",
						fontSize: 14,
						color: "#000"
					},
					subtitle: {
						name: "占比40%",
						fontSize: 10,
						color: "#333"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 6,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				chartData4: {},
				opts4: {
					color: ["#FFA53D", "#8AA8FE", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					legend: {},
					xAxis: {
						disableGrid: true,
						fontSize: 10,
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [{
								position: "right",
								title: "领取数",
								min: 0,
								textAlign: "left"
							},
							{
								position: "left",
								min: 0,
								title: "发放数"
							}
						]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						},
					}
				},
				opts5: {
					color: ["#FFA53D", "#8AA8FE", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 30, 15, 15],
					legend: {},
					xAxis: {
						disableGrid: true,
						fontSize: 10,
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "meter",
							width: 25,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							meterBorder: 3,
							meterFillColor: "#FFF7EE"
						}
					}
				},
				chartData5: {},
				opts6: {
					rotate: false,
					rotateLock: false,
					color: ["#4E7BFE", "#FFA53D", "#08DF8D"],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25
					},
					title: {
						name: "197",
						fontSize: 22,
						color: "#000"
					},
					subtitle: {
						name: "发放总数",
						fontSize: 10,
						color: "#555"
					},
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom",
							customColor: ["#fff", "#fff", "#fff"]
						}
					}
				},
				chartData6: {},
				couponStatics: {},
				couponSubMchId: "",
				isCouponDataTotalShow: false,
			}
		},
		onLoad() {
			const tokenInfo = uni.getStorageSync("tokenInfo");
			console.log("tokenInfo", tokenInfo);
			const roleNameList = tokenInfo.roleNames.split(",");
			console.log("roleNameList", roleNameList);
			const isManager = roleNameList.includes("服务经理") || roleNameList.includes("团队长") || roleNameList.includes(
				"客服经理") || roleNameList.includes("销售经理") || roleNameList.includes("财务经理") || roleNameList.includes(
				"前台主管") || roleNameList.includes("总经理");
			console.log("isManager", isManager);
			this.isManager = isManager;

			const isFinancial = roleNameList.includes("财务经理");
			this.isFinancial = isFinancial;
			// const couponTokenInfo = uni.getStorageSync("couponTokenInfo");
			// if (couponTokenInfo && couponTokenInfo.SubMchId) {
			// 	this.couponSubMchId = couponTokenInfo.SubMchId;
			// }
			// if (tokenInfo.roleNames == '服务经理' || tokenInfo.roleNames == '团队长' || tokenInfo.roleNames == '客服经理' || tokenInfo
			// 	.roleNames == '销售经理' || tokenInfo.roleNames == '财务经理' || tokenInfo.roleNames == '前台主管' || tokenInfo
			// 	.roleNames == '总经理') {
			// 	this.isManager = true;
			// }
			// if (tokenInfo.roleNames == '财务经理') {
			// 	this.isFinancial = true;
			// }
			this.userInfo = tokenInfo;
			this.handleIsMerchant();
			this.$nextTick(() => {
				let tabH = this.$refs.tabbar.safeArea.bottom + 48;
				this.tabH = tabH;
				this.handleGetChart1();
				this.handleGetChart2();
				this.handleGetChart3();
				this.handleGetChart4();
				this.handleGetChart5();
				this.handleGetChart6();
				this.handleCouponStatics();
			})
		},
		methods: {
			handleTab(index) {
				this.tabIndex = index;
				if (index == 0) {
					this.handleCouponStatics();
				}
			},
			// 卡券数量、发放总数统计
			handleCouponStatics() {
				apiRqs._getCouponStatics().then(res => {
					let newData = JSON.parse(JSON.stringify(res.data));
					console.log('卡券数量、发放总数统计', res);
					if (res.code == 200) {
						this.couponStatics = newData;
						this.isCouponDataTotalShow = true;
					} else {
						getApp().showToast(res.msg);
					}

				})
			},
			handleGetChart1() {
				let res = {
					series: [{
						name: "正确率",
						color: "#FFA53D",
						data: 0.8
					}]
				};
				this.chartData1 = JSON.parse(JSON.stringify(res));
			},
			handleGetChart2() {
				let res = {
					series: [{
						name: "正确率",
						color: "#FFA53D",
						data: 0.8
					}]
				};
				this.chartData2 = JSON.parse(JSON.stringify(res));
			},
			handleGetChart3() {
				let res = {
					series: [{
						name: "正确率",
						color: "#FFA53D",
						data: 0.8
					}]
				};
				this.chartData3 = JSON.parse(JSON.stringify(res));
			},
			handleGetChart4() {
				let res = {
					categories: ["12-21", "12-22", "12-23", "12-24", "12-25", "12-26"],
					series: [{
							name: "领取数",
							type: "area",
							style: "curve",
							data: [70, 50, 85, 130, 64, 88],
						},
						{
							name: "",
							type: "line",
							style: "curve",
							color: "#FFA53D",
							disableLegend: true,
							data: [70, 50, 85, 130, 64, 88]
						},
						{
							name: "发放数",
							type: "column",
							width: 15,
							data: [40, 30, 105, 80, 24, 58]
						}
					]
				};
				this.chartData4 = JSON.parse(JSON.stringify(res));
			},
			handleGetChart5() {
				let res = {
					categories: ["换购券", "折扣券", "满减券"],
					series: [{
							name: "发放数",
							data: [35, 36, 31]
						},
						{
							name: "使用数",
							data: [18, 27, 21]
						}
					]
				};
				this.chartData5 = JSON.parse(JSON.stringify(res));
			},
			handleGetChart6() {
				let res = {
					series: [{
						data: [{
							"name": "换购券",
							"value": 50
						}, {
							"name": "抵扣券",
							"value": 30
						}, {
							"name": "满减券",
							"value": 20
						}]
					}]
				};
				this.chartData6 = JSON.parse(JSON.stringify(res));
			},

			handleDateScreen() {
				uni.showActionSheet({
					itemList: ['近1个月', '近3个月', '近6个月'],
					success(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					}
				})
			},

			handleNavToggle(navUrl) {
				const logo_media = uni.getStorageSync("logo_media");
				if (navUrl == 'couponList') {
					uni.navigateTo({
						url: "/packageD/coupon/coupon-list"
					})
				} else if (navUrl == 'createCoupon') {
					if (!logo_media || logo_media.logo_media_url === "") {
						getApp().showToast("请先上传商户头像再进行此操作!");
						return false;
					}
					uni.navigateTo({
						url: "/packageD/coupon/create-coupon"
					})
				} else if (navUrl == 'sendCoupon') {
					uni.navigateTo({
						url: "/packageD/coupon/send-coupon"
					})
				} else if (navUrl == 'searchCoupon') {
					uni.navigateTo({
						url: "/packageD/coupon/search-coupon"
					})
				} else if (navUrl == 'reviewedCoupon') {
					uni.navigateTo({
						url: "/packageD/coupon/reviewed-coupon"
					})
				} else if (navUrl == 'quitCoupon') {
					uni.navigateTo({
						url: "/packageD/coupon/quit-coupon"
					})
				} else if (navUrl == 'todaySend') {
					uni.navigateTo({
						url: "/packageD/coupon/today-coupon"
					})
				} else if (navUrl == 'todayCharge') {
					uni.navigateTo({
						url: "/packageD/coupon/today-coupon"
					})
				} else if (navUrl == 'chargeCoupon') {
					uni.navigateTo({
						url: "/packageD/coupon/coupon-charge"
					})
				} else if (navUrl == 'uploadCouponLogo') {
					uni.navigateTo({
						url: "/packageD/coupon/upload-logo"
					})
				} else if (navUrl == 'settledMerchant') {
					uni.navigateTo({
						url: "/packageD/coupon/settled-merchant"
					})
				} else if (navUrl == 'queryMerchantProcess') {
					uni.navigateTo({
						url: "/packageD/coupon/merchant-process"
					})
				}
			},

			// code验证是否入驻成为商户
			handleIsMerchant() {
				getApp().showLoading();
				var that = this;
				uni.login({
					provider: "weixin",
					success(loginRes) {
						console.log(loginRes);
						let code = loginRes.code;
						uni.request({
							url: "https://biapi.vaubang.cn/api/v1/WxOpen/Login/WxOpenPay?code=" +
								code,
							method: "post",
							header: {
								"content-type": "application/json;charset=utf-8;"
							},
							success(res) {
								console.log('卡券入驻登陆结果', res);
								if (res.data.code != 200 && (res.data.msg == "未注册" || res.data.msg ==
										"用户不可见")) {
									that.couponRegistered();
								} else if (res.data.code == 1023) {
									uni.showToast({
										title: res.data.msg,
										icon: "none"
									});
									return false;
								} else {
									// 用户已注册卡券，用注册卡券的token换取卡券商户id
									uni.setStorageSync("loginInfo", res.data.data);
									uni.setStorageSync("couponLoginInfo", res.data.data);
									uni.request({
										url: "https://biapi.vaubang.cn/api/v1/User/GetTokenInfo",
										method: "post",
										header: {
											"content-type": "application/json;charset=utf-8;"
										},
										data: {
											token: res.data.data.token
										},
										success(tRes) {
											uni.hideLoading();
											console.log("卡券登录信息", tRes);
											uni.setStorageSync("couponTokenInfo", tRes.data.data);
											that.couponSubMchId = tRes.data.data.SubMchId;
											console.log("当前SubMchId", that.couponSubMchId);
										},
										fail() {
											uni.hideLoading();
										}
									})
								}
							},
							fail(err) {
								console.log(err);
							}
						})
					}
				})
			},
			// 未注册卡券用户进行注册
			couponRegistered() {
				const tokenInfo = uni.getStorageSync("tokenInfo");
				const roleList = uni.getStorageSync("roleList");
				if (!tokenInfo) {
					return false;
				}
				const roleName = tokenInfo.roleNames;
				const roleObject = roleList.find(item => item.roleName == roleName);
				const roleId = roleObject.id;
				let reqData = {
					"openId": tokenInfo.openId,
					"unionId": "0",
					"userMobile": tokenInfo.userMobile,
					"platform": 5,
					"avatarUrl": tokenInfo.avatar,
					"province": "",
					"city": "",
					"gender": "0",
					"nickName": "",
					"shopId": tokenInfo.shopId,
					"realName": tokenInfo.realName,
					"role": roleId,
					"department": "0",
					"invitationCode": "70855"
				};
				const that = this;
				apiRqs._couponResgistered(reqData).then((res) => {
					uni.hideLoading();
					console.log('卡券注册结果', res);
					if (res.code == 200) {
						that.handleIsMerchant();
					}
				}).catch((err) => {
					uni.hideLoading();
					console.log(err);
				})
			},

		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.coupon-list {
		margin: 20px;

		.coupon-workbench-box {
			.coupon-statics-box {
				margin-top: 20px;
				background-color: #fff;
				border-radius: 10px;
				padding: 15px 0px;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.statics-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin: 0 5px;

					.item-title {
						font-size: 12px;
						color: rgba(0, 0, 0, 0.8);
					}

					.item-value {
						font-size: 22px;
						font-weight: 600;
						color: rgba(0, 0, 0, 0.8);
						margin-top: 5px;
					}
				}

			}

			.user-info-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left-info-box {
					display: flex;
					align-items: center;

					.avatar-img {
						width: 48px;
						height: 48px;
						border-radius: 50%;
					}

					.info-text {
						margin-left: 12px;

						.user-role-name {

							color: rgba(0, 0, 0, 0.8);
							font-size: 14px;
							font-weight: 500;
						}

						.user-company {
							color: rgba(0, 0, 0, 0.3);
							font-size: 10px;
							margin-top: 1px;
						}
					}
				}

				.add-icon {
					font-size: 24px;
					font-weight: bold;
					color: #FFA53D;
				}
			}

			.coupon-desc-box {
				margin-top: 20px;
				background-color: #fff;
				border-radius: 10px;
				padding: 15px 20px;
				box-sizing: border-box;

				.title {
					font-size: 15px;

					color: rgba(0, 0, 0, 0.8);
					font-weight: 500;
					display: flex;
					align-items: center;

					&::before {
						display: inline-block;
						content: "";
						width: 4px;
						height: 12px;
						background-color: #FFA53D;
						border-radius: 6px;
						margin-right: 10px;
					}
				}

				.coupon-info-box {
					display: flex;
					justify-content: space-between;
					margin-top: 20px;

					.coupon-info-item {
						margin: 0 5px;

						.item-title {
							font-size: 12px;
							color: rgba(0, 0, 0, 0.8);
						}

						.item-value {
							font-size: 22px;
							font-weight: 500;
							color: #FFA53D;
							margin-top: 2px;
						}

						.today-send {
							.num-box {
								display: flex;
								align-items: center;
								margin-top: 2px;

								.value-num {
									font-size: 22px;
									font-weight: 500;

									&.red {
										color: #FC4E54;
									}

									&.green {
										color: #0AC26A;
									}
								}

								.value-arrow {
									width: 8px;
									height: 13px;
									margin-left: 2px;
								}
							}

							.contrast-box {
								font-size: 12px;
								margin-top: 3px;

								&.red {
									color: #FC4E54;
								}

								&.green {
									color: #0AC26A;
								}
							}

							.last-day-box {
								font-size: 12px;
								color: rgba(0, 0, 0, 0.5);
								margin-top: 1px;
							}
						}

					}
				}
			}

			.remind-box {
				margin-top: 20px;
				background-color: #fff;
				border-radius: 10px;
				padding: 15px 20px;
				box-sizing: border-box;

				.title-box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title-text {
						font-size: 15px;
						color: rgba(0, 0, 0, 0.8);
						font-weight: 500;
						display: flex;
						align-items: center;

						&::before {
							display: inline-block;
							content: "";
							width: 4px;
							height: 12px;
							background-color: #FFA53D;
							border-radius: 6px;
							margin-right: 10px;
						}
					}

					.refresh-icon {
						width: 20px;
						height: 20px;
					}

				}

				.remind-content {
					display: flex;
					align-items: center;
					margin-top: 8px;

					.remind-surplus-chart {
						width: 46px;
						height: 46px;
						text-align: center;
						line-height: 46px;
						border-radius: 50%;
						border: 3px solid #FFA53D;
						font-size: 16px;
						font-weight: 500;
						color: #FFA53D;
					}

					.remind-surplus-tip {
						font-size: 12px;
						color: rgba(0, 0, 0, 0.5);
						margin-left: 10px;

						.surplus-num {
							color: rgba(0, 0, 0, 1);
							font-weight: 500;
							margin: 0 2px;
						}
					}
				}
			}

			.workbench-box {
				margin-top: 20px;
				background-color: #fff;
				border-radius: 10px;
				padding: 15px 0px;
				box-sizing: border-box;

				.title {
					font-size: 15px;
					padding: 0 20px;
					color: rgba(0, 0, 0, 0.8);
					font-weight: 500;
					display: flex;
					align-items: center;

					&::before {
						display: inline-block;
						content: "";
						width: 4px;
						height: 12px;
						background-color: #FFA53D;
						border-radius: 6px;
						margin-right: 10px;
					}
				}

				.workbench-list {
					display: flex;
					flex-wrap: wrap;
					padding: 0 5px;

					.workbench-item {
						width: calc(100% / 4);
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-top: 20px;

						.item-icon {
							width: 36px;
							height: 36px;
							border-radius: 10px;
						}

						.item-name {
							color: rgba(0, 0, 0, 0.7);
							font-size: 12px;
							margin-top: 10px;
						}

						.item-icon-box {
							width: 36px;
							height: 36px;
							position: relative;

							.item-badge {
								display: flex;
								overflow: hidden;
								box-sizing: border-box;
								justify-content: center;
								flex-direction: row;
								height: 20px;
								min-width: 20px;
								padding: 0 4px;
								line-height: 18px;
								color: #fff;
								border-radius: 100px;
								border: 1px solid #fff;
								text-align: center;
								font-family: 'Helvetica Neue', Helvetica, sans-serif;
								-webkit-font-feature-settings: "tnum";
								font-feature-settings: "tnum";
								font-size: 11px;
								background-color: #dd524d;
								position: absolute;
								right: -14px;
								top: -10px;
							}
						}
					}
				}
			}
		}

		.coupon-data-kpi {


			.coupon-desc-box {
				margin-top: 20px;
				background-color: #fff;
				border-radius: 10px;
				padding: 15px 0px;
				box-sizing: border-box;

				.coupon-info-box {
					display: flex;
					justify-content: space-between;
					margin: 0 20px;

					.coupon-info-item {
						margin: 0 5px;

						.item-title {
							font-size: 12px;
							color: rgba(0, 0, 0, 0.8);
						}

						.item-value {
							font-size: 22px;
							font-weight: 500;
							color: #FFA53D;
							margin-top: 2px;
						}

						.today-send {
							.num-box {
								display: flex;
								align-items: center;
								margin-top: 2px;

								.value-num {
									font-size: 22px;
									font-weight: 500;

									&.red {
										color: #FC4E54;
									}

									&.green {
										color: #0AC26A;
									}
								}

								.value-arrow {
									width: 8px;
									height: 13px;
									margin-left: 2px;
								}
							}

							.contrast-box {
								font-size: 12px;
								margin-top: 3px;

								&.red {
									color: #FC4E54;
								}

								&.green {
									color: #0AC26A;
								}
							}

							.last-day-box {
								font-size: 12px;
								color: rgba(0, 0, 0, 0.5);
								margin-top: 1px;
							}
						}

					}
				}

				.coupon-propor-chart-list {
					display: flex;
					align-items: center;
					margin-top: 20px;

					.coupon-propor-chart-item {
						flex: 1;
						min-width: 0;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin: 0 10px;

						.chart-box {
							width: 100%;
							height: 74px;
						}

						.chart-name {
							font-size: 12px;
							color: #000;
							font-weight: 500;
							margin-top: 5px;
						}
					}
				}
			}

			.coupon-user-get-box {
				margin-top: 20px;
				background-color: #fff;
				border-radius: 10px;
				padding: 15px 0px;
				box-sizing: border-box;

				.title-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 20px;

					.title-text {
						font-size: 15px;
						color: rgba(0, 0, 0, 0.8);
						font-weight: 500;
						display: flex;
						align-items: center;

						&::before {
							display: inline-block;
							content: "";
							width: 4px;
							height: 12px;
							background-color: #FFA53D;
							border-radius: 6px;
							margin-right: 10px;
						}
					}

					.date-scrren {
						display: flex;
						align-items: center;

						.date-text {
							font-size: 10px;
							color: rgba(0, 0, 0, 0.3);
						}

						.arrow-down {
							font-size: 10px;
							color: rgba(0, 0, 0, 0.3);
							margin-left: 3px;
						}
					}
				}

				.coupon-user-get-chart {
					margin-top: 20px;
				}
			}
		}

		.height {
			height: 30px;
		}
	}
</style>